<template>
    <el-header class="header">
        <div class="logo" @click="go_home"></div>
        <div class="slogan">说正宗本地话 —— 融入本地生活</div>
        <div v-if="!external_source" class="user-profile" @click="toggleDropdown" @mouseover="highlightAvatar" @mouseleave="unhighlightAvatar">
          <img :src="avatar" :class="{ 'highlighted': isAvatarHighlighted }" alt="Avatar" />
          <span class="user-name">{{ nick_name }}</span>
          <div v-if="isDropdownOpen" class="dropdown-menu">
            <!-- 下拉菜单内容 -->
            <ul>
              <li @click="goto_user_center">个人中心</li>
              <li v-if="is_admin==1" @click="goto_console_platefrom">系统管理</li>
              <li @click="logout()">退出登录</li>
            </ul>
          </div>
        </div>
    </el-header>
</template>
    
<script>
    import router from '@/router';
    import axios from 'axios';

    export default {
      name: 'HeaderPage',
      props: {
        msg: String,
        //如果这个值是true表示这个页面是从系统外部访问的。
        //来源可能是分享页面，可能是推荐页面。
        //用户不需要登录就可以访问，所以看不见用户名和头像框
        external_source:{
          type:Boolean,
          default:false, 
         },
        avatar:{
          type:String,
          default:'https://sam-test.oss-cn-beijing.aliyuncs.com/assets/default-avatar.png',
        },
        nick_name:{
          type:String,
          default:'no-name',
        },
        is_admin:{
          type:String,
          default:'',
        }
      },
      data(){
        return{
            // avatar: null,
            // nick_name: 'no-name',
            isAvatarHighlighted: false,
            isDropdownOpen: false,
            login_token:null,
        }
      },
    
      // created(){
      //   //获取用户身份，检查是否要展示管理员菜单
      //   return new Promise ((resolve)=>{
      //     const login_token= this.$commonFunctions.get_cookies('login_token')
      //     this.$commonFunctions.get_user_profiles(login_token).then((response)=>{
      //       console.log("用户信息的返回："+JSON.stringify( response))
      //       this.is_superuser=Boolean(response.is_superuser)
      //       console.log("HeaderPage检查用户:"+login_token+"是否为超管："+this.is_superuser)
      //     resolve(this.is_superuser)
      //    })
      //   })
      //   },

      methods:{
        goto_console_platefrom(){
          this.$router.push({name: "ConsolePage"});
        },
        go_home(){
          this.$router.push({path:'/dictionary'});
        },
        highlightAvatar() {
            this.isAvatarHighlighted = true;
        },
        unhighlightAvatar() {
            this.isAvatarHighlighted = false;
        },
        toggleDropdown() {
            this.isDropdownOpen = !this.isDropdownOpen;
        },
       
        goto_user_center(){
             //跳转回登录页面
             this.$router.push({ path: '/user_center/' });
        },

        //删除cookie
        deleteCookie(name) {
            document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
        },
        //帐号登出
        logout(){
          
            //删除cookie信息
            this.$commonFunctions.deleteCookie('login_token');
            this.$commonFunctions.deleteCookie('pcode');
            this.$commonFunctions.deleteCookie('user_name');
            this.$commonFunctions.deleteCookie('avatar');
            this.$commonFunctions.deleteCookie('user_id');
           
            //跳转回登录页面
            this.$router.push({ path: '/' });
        },
        
    },
};
    </script>
    
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px;
        background-color: rgb(8, 58, 108);
        width:100%;
        height: 45px;
      }
      
      .slogan {
        font-weight: bold;
        font-size: 10pt;
        color: #fff;
        margin-left: 0.5dvw;
      }

      .logo{
        background-image:url('https://sam-test.oss-cn-beijing.aliyuncs.com/assets/logo.jpeg') ;
        width:36px;
        height: 36px;
        background-size: contain;
        cursor:pointer;
      }
      
      .user-profile {
        display: flex;
        align-items: center;
        margin-left:auto; 
        cursor: pointer;
        color:#fff;
        position: relative;
      }
      .user-profile.user-name{
        display: inline-block;
        font-size: 10pt;
      }

      .user-profile img {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        margin-right: 5px;
        transition: filter 0.3s;
      }
      
      .user-profile img.highlighted {
        filter: brightness(1.2);
      }
      
      .dropdown-menu {
        position: absolute;
        top: 120%;
        right: 0;
        background-color: #fff;
        border: 1px solid #ccc;
        padding: 10px;
        z-index: 999;
        display:block;
      }
      
      .dropdown-menu ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
      }
      
      .dropdown-menu li {
        padding: 5px 0;
        cursor: pointer;
        color: #0067b6;
      }
      
      .dropdown-menu li:hover {
        background-color: #f1f1f1;
      }
    </style>